<script lang="ts" setup>
interface ResultItem {
  price: string;
  level?: string; // 添加 level 属性，并设为可选
}

interface ResData {
  data?: {
    number: string;
    count: number;
    result?: ResultItem[];
    msg?: string;
  };
}
defineOptions({
  name: "SingleLose"
});
withDefaults(defineProps<{ resData: ResData; image?: string }>(), {
  resData: () => ({}),
  image: "Frame_777"
});
import { getSvg } from "@/utils";
import useWinRes from "../../hooks/useWinRes";
import { getLevelDesc } from "../../hooks/useUtils";
const { toggleWinRes } = useWinRes();
</script>
<template>
  <div class="w-100vw h-100vh overflow-y-auto center font-[Inter,Inter]">
    <div class="w-390 h-643 relative font-[Inter,Inter]">
      <img class="w-full h-639" :src="getSvg(image)" :alt="image" />
      <div
        class="absolute top-230 left-50% translate-x-[-50%] font-400 text-13 lh-16 text-center"
      >
        <div
          v-if="resData?.data?.result?.length && resData?.data?.msg === 'won'"
          v-for="(it, idx) in resData?.data?.result"
          :key="idx"
          class="color-#000000"
        >
          <p>
            {{ it.level && getLevelDesc(it.level) }} :
            <span class="color-#00BA38 font-bold">{{ it.price }}</span> บาท
          </p>
          <br />
        </div>

        <div v-else class="color-#F34A4A">ขอแสดงความเสียใจ คุณไม่ถูกรางวัล</div>
      </div>
      <div
        class="absolute top-280 left-50% translate-x-[-50%] w-260 h-84 lh-84 bg-[rgba(255,255,255,0.42)] rounded-14 b-1 b-solid b-#FFC72D text-center"
      >
        <span class="font-bold text-32 color-#F34A4A">{{
          resData?.data?.number
        }}</span>
        <div class="absolute right-0 top-[-11px] w-51 h-51">
          <img class="w-51 h-51" :src="getSvg('Group_35')" alt="" />
          <span
            class="absolute left-50% top-50% translate-[-50%] font-bold text-16 color-#EF196B lh-19 text-center"
            >x{{ resData?.data?.count }}</span
          >
        </div>
      </div>
      <div
        class="absolute top-383 left-50% translate-x-[-50%] w-320 h-100 b-1 b-solid b-pink"
      ></div>
      <div
        class="absolute top-491 left-50% translate-x-[-50%] font-300 text-10 color-#424242 lh-12 text-center"
      >
        กรุณาตรวจสอบอีกครั้งกับสำนักงานสลากกินแบ่งรัฐบาล
      </div>
      <div
        class="absolute bottom-62 left-50% translate-x-[-50%] w-36 h-36"
        @click="toggleWinRes()"
      >
        <img class="w-36 h-36" :src="getSvg('Close')" alt="" />
      </div>
    </div>
  </div>
</template>
